<!-- 设备维修-故障类型页面 -->
<template>
  <div class="equip-wrap-common">
    <px-form class="custom-form-ui equip-form" label-position="right" label-width="120px">
      <px-row :gutter="16">
        <px-col :span="6">
          <px-form-item label="故障类型名称">
            <px-input v-model="searchKey" placeholder="请输入故障类型名称" maxlength="50" @blur="searchKey = $event.target.value.trim()" />
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-button type="primary" @click="queryTableTree">查询</px-button>
          <px-button @click="resetTable">重置</px-button>
        </px-col>
      </px-row>
    </px-form>
    <div class="equip-table-btn">
      <px-button v-has="'ALL_EQUIP_MAINTAIN_FAULTTYPE_ADD'" type="primary" class="table-btn" @click="addFaultType">新增故障类型</px-button>
    </div>
    <px-table
      :data="tableData"
      class="equip-table"
      size="small"
      height="calc(100vh - 311px)"
      border
      row-key="id"
      :tree-props="{ children: 'children' }"
    >
      <px-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :fixed="item.fixed"
      >
        <template #default="scope">{{
          scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
        }}</template>
      </px-table-column>
      <px-table-column label="操作" min-width="120" align="center">
        <template #default="scope">
          <px-tooltip content="编辑" placement="top">
            <px-button v-has="'ALL_EQUIP_MAINTAIN_FAULTTYPE_EDIT'" link type="primary" icon="EditPen" @click="handleEdit(scope.row)" />
          </px-tooltip>
          <px-tooltip v-if="scope.row.parentId === 0" content="添加子级类型" placement="top">
            <px-button v-has="'ALL_EQUIP_MAINTAIN_FAULTTYPE_ADD'" link type="primary" icon="Plus" @click="handleAddChildren(scope.row)" />
          </px-tooltip>
          <px-tooltip content="删除" placement="top">
            <px-button v-has="'ALL_EQUIP_MAINTAIN_FAULTTYPE_DELETE'" link type="danger" icon="Delete" @click="handleDelete(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
    <!-- 新增/修改抽屉 -->
    <AddFaultTypeDialog
      :visible="equipVisible"
      :drawerType="drawerType"
      :detailData="detailData"
      @queryTable="queryTable"
      @closeDrawer="closeDrawer"
    />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ALL_EQUIP_MAINTAIN_FAULTTYPE"
});
import { queryFaultTypeList, deleteFaultType } from "@/api/equip/maintain";
import { PxMessage, PxMessageBox } from "px-ui";
import { onMounted, reactive, toRefs } from "vue";
import AddFaultTypeDialog from "./components/AddFaultTypeDialog.vue";

const state = reactive<any>({
  searchKey: "",
  tableColumns: [
    { prop: "faultTypeName", label: "故障类型名称", minWidth: "120", showOverflowTooltip: true },
    { prop: "faultTypeCode", label: "故障类型编码", minWidth: "120", showOverflowTooltip: true },
    { prop: "remark", label: "备注", minWidth: "120", showOverflowTooltip: true },
    { prop: "createName", label: "创建人", minWidth: "120", showOverflowTooltip: true },
    { prop: "createTime", label: "创建时间", minWidth: "120", showOverflowTooltip: true }
  ],
  originTableData: [],
  tableData: [],
  equipVisible: false,
  drawerType: "add",
  detailData: {}
});
const { searchKey, tableColumns, originTableData, tableData, equipVisible, drawerType, detailData } = toRefs(state);

// 进入页面时触发
onMounted(() => {
  queryTable();
});

// 通过搜索值过滤表格
const getFilterTableData = () => {
  const filter = searchKey.value.toLowerCase();
  const filterData = data => {
    const result = [];
    data.forEach(item => {
      if (item.faultTypeName.toLowerCase().includes(filter)) {
        result.push(item);
      } else if (item.children) {
        const children = filterData(item.children);
        if (children.length) {
          result.push({
            ...item,
            children
          });
        }
      }
    });
    return result;
  };
  return filterData(originTableData.value);
};

// 查询设备列表
const queryTable = async () => {
  const data = await queryFaultTypeList({});
  originTableData.value = data || [];
  tableData.value = originTableData.value;
  queryTableTree();
};
// 查询设备列表-过滤
const queryTableTree = () => {
  if (searchKey.value) {
    tableData.value = getFilterTableData() || [];
  } else {
    tableData.value = originTableData.value;
  }
};
// 重置筛选条件和设备列表
const resetTable = async () => {
  searchKey.value = "";
  tableData.value = originTableData.value;
};
// 添加设备
const addFaultType = () => {
  equipVisible.value = true;
  drawerType.value = "add";
};
// 编辑设备
const handleEdit = (row: any) => {
  detailData.value = JSON.parse(JSON.stringify(row));
  equipVisible.value = true;
  drawerType.value = "edit";
};
// 添加设备子级
const handleAddChildren = (row: any) => {
  detailData.value = JSON.parse(JSON.stringify(row));
  equipVisible.value = true;
  drawerType.value = "addChildren";
};
// 关闭抽屉
const closeDrawer = () => {
  equipVisible.value = false;
};
// 删除设备
const handleDelete = async (row: any) => {
  const { faultTypeName, id } = row;
  PxMessageBox.confirm(`要删除当前故障类型“${faultTypeName}”吗？`, "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await deleteFaultType({ ids: [id] });
      PxMessage.success("删除成功");
      queryTable();
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");
</style>
